<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>消息与通讯录 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #3B82F6;
      --secondary: #10B981;
      --danger: #EF4444;
      --light: #F9FAFB;
      --dark: #1F2937;
      --light-gray: #E5E7EB;
      --dark-gray: #6B7280;
      --white: #FFFFFF;
      --border-light: #E5E7EB;
      --border-dark: #374151;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--light);
      color: var(--dark);
      height: 100vh;
      overflow-x: hidden;
      margin: 0;
      transition: background-color 0.3s ease;
    }
    
    /* 页面容器 */
    .page-container {
      height: 100vh;
      display: flex;
      flex-direction: column;
      display: none;
    }
    
    .page-container.active {
      display: flex;
    }
    
    /* 顶部导航 */
    .page-header {
      padding: 16px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      gap: 16px;
    }
    
    .dark .page-header {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      flex: 1;
      text-align: center;
    }
    
    .dark .header-title {
      color: var(--white);
    }
    
    .header-actions {
      display: flex;
      gap: 16px;
    }
    
    .header-action {
      color: var(--dark);
      background: none;
      border: none;
      font-size: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .dark .header-action {
      color: var(--white);
    }
    
    /* 搜索栏 */
    .search-bar {
      padding: 10px 16px;
      background-color: var(--light);
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .search-bar {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    .search-input {
      width: 100%;
      padding: 10px 16px 10px 40px;
      border-radius: 8px;
      border: 1px solid var(--border-light);
      background-color: var(--white);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: 14px center;
      font-size: 15px;
    }
    
    .dark .search-input {
      background-color: #374151;
      border-color: var(--border-dark);
      color: var(--white);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    }
    
    .search-input:focus {
      outline: none;
      border-color: var(--primary);
    }
    
    /* 标签栏 */
    .tabs-bar {
      display: flex;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .tabs-bar {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    .tab {
      flex: 1;
      padding: 14px 0;
      text-align: center;
      font-size: 15px;
      font-weight: 500;
      color: var(--dark-gray);
      position: relative;
      cursor: pointer;
    }
    
    .dark .tab {
      color: #9CA3AF;
    }
    
    .tab.active {
      color: var(--primary);
    }
    
    .tab.active::after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: var(--primary);
      border-radius: 3px 3px 0 0;
    }
    
    .tab-badge {
      position: absolute;
      top: 8px;
      right: 20%;
      background-color: var(--danger);
      color: white;
      font-size: 11px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 列表容器 */
    .list-container {
      flex: 1;
      overflow-y: auto;
    }
    
    /* 消息列表 */
    .message-item {
      padding: 12px 16px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
    
    .dark .message-item {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    .message-item:hover {
      background-color: var(--light);
    }
    
    .dark .message-item:hover {
      background-color: #1F2937;
    }
    
    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      position: relative;
    }
    
    .avatar-status {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid var(--white);
      background-color: var(--secondary);
    }
    
    .dark .avatar-status {
      border-color: #111827;
    }
    
    .status-offline {
      background-color: var(--dark-gray);
    }
    
    .message-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    
    .message-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2px;
    }
    
    .contact-name {
      font-weight: 500;
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .dark .contact-name {
      color: var(--white);
    }
    
    .message-time {
      font-size: 12px;
      color: var(--dark-gray);
    }
    
    .dark .message-time {
      color: #9CA3AF;
    }
    
    .message-text {
      font-size: 14px;
      color: var(--dark-gray);
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .dark .message-text {
      color: #9CA3AF;
    }
    
    .message-unread {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      font-size: 11px;
      font-weight: 500;
      margin-left: 4px;
    }
    
    /* 通讯录样式 */
    .contact-list {
      background-color: var(--white);
    }
    
    .dark .contact-list {
      background-color: #111827;
    }
    
    .contact-section {
      padding: 8px 16px;
      background-color: var(--light);
      color: var(--dark-gray);
      font-size: 14px;
      font-weight: 500;
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .contact-section {
      background-color: #1F2937;
      color: #9CA3AF;
      border-bottom-color: var(--border-dark);
    }
    
    .contact-item {
      padding: 12px 16px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
    }
    
    .dark .contact-item {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    .contact-item:hover {
      background-color: var(--light);
    }
    
    .dark .contact-item:hover {
      background-color: #1F2937;
    }
    
    .contact-info {
      flex: 1;
    }
    
    .contact-extra {
      color: var(--dark-gray);
      font-size: 13px;
    }
    
    .dark .contact-extra {
      color: #9CA3AF;
    }
    
    /* 侧边索引 */
    .side-index {
      position: fixed;
      top: 50%;
      right: 5px;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 4px;
      z-index: 10;
    }
    
    .index-letter {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 500;
      color: var(--dark-gray);
      border-radius: 4px;
    }
    
    .dark .index-letter {
      color: #9CA3AF;
    }
    
    .index-letter.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 弹出窗口 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    
    .modal {
      background-color: var(--white);
      border-radius: 12px;
      width: 90%;
      max-width: 400px;
      transform: translateY(20px);
      transition: transform 0.3s ease;
    }
    
    .dark .modal {
      background-color: #1F2937;
      color: var(--white);
    }
    
    .modal-overlay.active .modal {
      transform: translateY(0);
    }
    
    .modal-header {
      padding: 16px;
      border-bottom: 1px solid var(--border-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .dark .modal-header {
      border-bottom-color: var(--border-dark);
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    .modal-close {
      background: none;
      border: none;
      font-size: 20px;
      color: var(--dark-gray);
    }
    
    .dark .modal-close {
      color: #9CA3AF;
    }
    
    .modal-body {
      padding: 16px;
    }
    
    .modal-footer {
      padding: 12px 16px;
      border-top: 1px solid var(--border-light);
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
    
    .dark .modal-footer {
      border-top-color: var(--border-dark);
    }
    
    .modal-btn {
      padding: 8px 16px;
      border-radius: 6px;
      font-weight: 500;
      font-size: 15px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
    
    .modal-btn-secondary {
      background-color: var(--light);
      border: 1px solid var(--border-light);
      color: var(--dark);
    }
    
    .dark .modal-btn-secondary {
      background-color: #374151;
      border-color: var(--border-dark);
      color: var(--white);
    }
    
    .modal-btn-primary {
      background-color: var(--primary);
      border: none;
      color: white;
    }
    
    /* 操作菜单 */
    .action-sheet {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--white);
      border-radius: 16px 16px 0 0;
      padding: 20px 16px 16px;
      z-index: 1000;
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }
    
    .dark .action-sheet {
      background-color: #1F2937;
      color: var(--white);
    }
    
    .action-sheet.active {
      transform: translateY(0);
    }
    
    .action-sheet-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .action-sheet-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    
    .action-title {
      text-align: center;
      font-size: 14px;
      color: var(--dark-gray);
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .action-title {
      color: #9CA3AF;
      border-bottom-color: var(--border-dark);
    }
    
    .action-buttons {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    .action-btn {
      padding: 14px;
      border-radius: 10px;
      background-color: var(--light);
      border: none;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    
    .dark .action-btn {
      background-color: #374151;
      color: var(--white);
    }
    
    .action-btn.destructive {
      background-color: rgba(239, 68, 68, 0.1);
      color: var(--danger);
    }
    
    .dark .action-btn.destructive {
      background-color: rgba(239, 68, 68, 0.2);
      color: var(--danger);
    }
    
    .cancel-btn {
      margin-top: 12px;
      padding: 14px;
      border-radius: 10px;
      background-color: var(--white);
      border: 1px solid var(--border-light);
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      cursor: pointer;
    }
    
    .dark .cancel-btn {
      background-color: #111827;
      border-color: var(--border-dark);
      color: var(--white);
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 100;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    
    .dark .style-switcher {
      background-color: #1F2937;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .switcher-header {
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 500;
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .switcher-header {
      border-bottom-color: var(--border-dark);
      color: var(--white);
    }
    
    .style-option {
      padding: 10px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .style-option:hover {
      background-color: var(--light);
    }
    
    .dark .style-option {
      color: var(--white);
    }
    
    .dark .style-option:hover {
      background-color: #374151;
    }
    
    .style-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 卡片风格 */
    .card-style .message-item,
    .card-style .contact-item {
      margin: 8px 16px;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    
    .card-style .list-container {
      background-color: var(--light);
      padding-top: 8px;
    }
    
    .card-style.dark .list-container {
      background-color: var(--dark);
    }
    
    .card-style.dark .message-item,
    .card-style.dark .contact-item {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    /* 简约风格 */
    .minimal-style .header-action {
      font-size: 18px;
    }
    
    .minimal-style .avatar {
      width: 44px;
      height: 44px;
    }
    
    .minimal-style .contact-name {
      font-size: 15px;
    }
    
    .minimal-style .message-text,
    .minimal-style .message-time {
      font-size: 13px;
    }
    
    .minimal-style .tabs-bar {
      display: none;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .message-item, .contact-item {
      animation: fadeIn 0.2s ease forwards;
    }
    
    .message-item:nth-child(1) { animation-delay: 0.05s; }
    .message-item:nth-child(2) { animation-delay: 0.1s; }
    .message-item:nth-child(3) { animation-delay: 0.15s; }
    .message-item:nth-child(4) { animation-delay: 0.2s; }
    .message-item:nth-child(5) { animation-delay: 0.25s; }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">页面样式</div>
    <div class="style-option active" data-style="default">默认样式</div>
    <div class="style-option" data-style="dark">深色模式</div>
    <div class="style-option" data-style="card">卡片风格</div>
    <div class="style-option" data-style="minimal">简约风格</div>
  </div>
  
  <!-- 默认样式页面 -->
  <div class="page-container active" id="defaultPage">
    <!-- 顶部导航 -->
    <div class="page-header">
      <button class="header-action" id="newChatBtn" aria-label="新建聊天">
        <i class="fa fa-plus"></i>
      </button>
      <div class="header-title">消息</div>
      <div class="header-action" id="menuBtn" aria-label="菜单">
        <i class="fa fa-cog"></i>
      </div>
    </div>
    
    <!-- 标签栏 -->
    <div class="tabs-bar">
      <div class="tab active" data-view="messages">
        消息
        <span class="tab-badge">3</span>
      </div>
      <div class="tab" data-view="contacts">通讯录</div>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-bar">
      <input type="text" class="search-input" placeholder="搜索消息或联系人...">
    </div>
    
    <!-- 消息列表视图 -->
    <div class="list-container" id="messagesView">
      <div class="message-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/64/200/200" alt="张设计师" class="w-100 h-100">
          <div class="avatar-status"></div>
        </div>
        <div class="message-content">
          <div class="message-header">
            <div class="contact-name">张设计师</div>
            <div class="message-time">10:32</div>
          </div>
          <div class="message-text">
            <i class="fa fa-check-circle"></i>
            <span>好的，我会准备一份详细的方案</span>
          </div>
        </div>
      </div>
      
      <div class="message-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/91/200/200" alt="李小明" class="w-100 h-100">
          <div class="avatar-status"></div>
        </div>
        <div class="message-content">
          <div class="message-header">
            <div class="contact-name">李小明</div>
            <div class="message-time">昨天</div>
          </div>
          <div class="message-text">
            <span>你有空吗？想和你讨论一下项目细节</span>
            <span class="message-unread">2</span>
          </div>
        </div>
      </div>
      
      <div class="message-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/26/200/200" alt="王大锤" class="w-100 h-100">
          <div class="avatar-status status-offline"></div>
        </div>
        <div class="message-content">
          <div class="message-header">
            <div class="contact-name">王大锤</div>
            <div class="message-time">昨天</div>
          </div>
          <div class="message-text">
            <i class="fa fa-check"></i>
            <span>那个设计我已经修改好了，你看看</span>
          </div>
        </div>
      </div>
      
      <div class="message-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/65/200/200" alt="设计交流群" class="w-100 h-100">
        </div>
        <div class="message-content">
          <div class="message-header">
            <div class="contact-name">设计交流群</div>
            <div class="message-time">周三</div>
          </div>
          <div class="message-text">
            <span><strong>赵小丽</strong>：分享一个很棒的设计资源网站</span>
            <span class="message-unread">5</span>
          </div>
        </div>
      </div>
      
      <div class="message-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/24/200/200" alt="系统通知" class="w-100 h-100">
        </div>
        <div class="message-content">
          <div class="message-header">
            <div class="contact-name">系统通知</div>
            <div class="message-time">周三</div>
          </div>
          <div class="message-text">
            <span>你的账号已成功完成实名认证</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 通讯录视图 -->
    <div class="list-container contact-list" id="contactsView" style="display: none;">
      <div class="contact-item">
        <div class="avatar">
          <div class="bg-primary text-white w-100 h-100 d-flex align-items-center justify-content-center">
            <i class="fa fa-user-plus fa-lg"></i>
          </div>
        </div>
        <div class="contact-info">
          <div class="contact-name">新的朋友</div>
          <div class="contact-extra">3个新的好友请求</div>
        </div>
      </div>
      
      <div class="contact-item">
        <div class="avatar">
          <div class="bg-secondary text-white w-100 h-100 d-flex align-items-center justify-content-center">
            <i class="fa fa-users fa-lg"></i>
          </div>
        </div>
        <div class="contact-info">
          <div class="contact-name">群聊</div>
          <div class="contact-extra">8个群聊</div>
        </div>
      </div>
      
      <div class="contact-section">A</div>
      
      <div class="contact-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/177/200/200" alt="阿强" class="w-100 h-100">
          <div class="avatar-status"></div>
        </div>
        <div class="contact-info">
          <div class="contact-name">阿强</div>
          <div class="contact-extra">前端开发</div>
        </div>
      </div>
      
      <div class="contact-section">B</div>
      
      <div class="contact-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/188/200/200" alt="白露" class="w-100 h-100">
          <div class="avatar-status status-offline"></div>
        </div>
        <div class="contact-info">
          <div class="contact-name">白露</div>
          <div class="contact-extra">UI设计师</div>
        </div>
      </div>
      
      <div class="contact-section">L</div>
      
      <div class="contact-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/91/200/200" alt="李小明" class="w-100 h-100">
          <div class="avatar-status"></div>
        </div>
        <div class="contact-info">
          <div class="contact-name">李小明</div>
          <div class="contact-extra">产品经理</div>
        </div>
      </div>
      
      <div class="contact-section">W</div>
      
      <div class="contact-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/26/200/200" alt="王大锤" class="w-100 h-100">
          <div class="avatar-status status-offline"></div>
        </div>
        <div class="contact-info">
          <div class="contact-name">王大锤</div>
          <div class="contact-extra">后端开发</div>
        </div>
      </div>
      
      <div class="contact-section">Z</div>
      
      <div class="contact-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/64/200/200" alt="张设计师" class="w-100 h-100">
          <div class="avatar-status"></div>
        </div>
        <div class="contact-info">
          <div class="contact-name">张设计师</div>
          <div class="contact-extra">UI/UX设计师</div>
        </div>
      </div>
      
      <div class="contact-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/65/200/200" alt="赵小丽" class="w-100 h-100">
          <div class="avatar-status"></div>
        </div>
        <div class="contact-info">
          <div class="contact-name">赵小丽</div>
          <div class="contact-extra">插画师</div>
        </div>
      </div>
      
      <!-- 侧边索引 -->
      <div class="side-index">
        <div class="index-letter">A</div>
        <div class="index-letter">B</div>
        <div class="index-letter">C</div>
        <div class="index-letter">D</div>
        <div class="index-letter">L</div>
        <div class="index-letter">W</div>
        <div class="index-letter">Z</div>
      </div>
    </div>
  </div>
  
  <!-- 深色模式页面 -->
  <div class="page-container dark" id="darkPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 卡片风格页面 -->
  <div class="page-container card-style" id="cardPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 简约风格页面 -->
  <div class="page-container minimal-style" id="minimalPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 新建聊天弹窗 -->
  <div class="modal-overlay" id="newChatModal">
    <div class="modal">
      <div class="modal-header">
        <div class="modal-title">新建聊天</div>
        <button class="modal-close" id="closeNewChatModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <div class="contact-item">
          <div class="avatar">
            <img src="https://picsum.photos/id/64/200/200" alt="张设计师" class="w-100 h-100">
            <div class="avatar-status"></div>
          </div>
          <div class="contact-info">
            <div class="contact-name">张设计师</div>
            <div class="contact-extra">在线</div>
          </div>
        </div>
        
        <div class="contact-item">
          <div class="avatar">
            <img src="https://picsum.photos/id/91/200/200" alt="李小明" class="w-100 h-100">
            <div class="avatar-status"></div>
          </div>
          <div class="contact-info">
            <div class="contact-name">李小明</div>
            <div class="contact-extra">在线</div>
          </div>
        </div>
        
        <div class="contact-item">
          <div class="avatar">
            <div class="bg-primary text-white w-100 h-100 d-flex align-items-center justify-content-center">
              <i class="fa fa-users fa-lg"></i>
            </div>
          </div>
          <div class="contact-info">
            <div class="contact-name">创建群聊</div>
            <div class="contact-extra">邀请好友加入群聊</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 菜单操作弹窗 -->
  <div class="action-sheet-overlay" id="menuOverlay">
    <div class="action-sheet" id="menuSheet">
      <div class="action-title">消息设置</div>
      <div class="action-buttons">
        <button class="action-btn">
          <i class="fa fa-bell"></i>
          <span>消息通知</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-filter"></i>
          <span>消息过滤</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-ban"></i>
          <span>黑名单</span>
        </button>
        <button class="action-btn destructive">
          <i class="fa fa-trash"></i>
          <span>清空所有消息</span>
        </button>
      </div>
      <button class="cancel-btn" id="cancelMenu">取消</button>
    </div>
  </div>
  
  <!-- 联系人操作弹窗 -->
  <div class="action-sheet-overlay" id="contactActionOverlay">
    <div class="action-sheet" id="contactActionSheet">
      <div class="action-title">联系人操作</div>
      <div class="action-buttons">
        <button class="action-btn">
          <i class="fa fa-comment"></i>
          <span>发消息</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-phone"></i>
          <span>打电话</span>
        </button>
        <button class="action-btn">
          <i class="fa fa-user"></i>
          <span>查看资料</span>
        </button>
        <button class="action-btn destructive">
          <i class="fa fa-user-times"></i>
          <span>删除联系人</span>
        </button>
      </div>
      <button class="cancel-btn" id="cancelContactAction">取消</button>
    </div>
  </div>
  
  <!-- 确认弹窗 -->
  <div class="modal-overlay" id="confirmModal">
    <div class="modal">
      <div class="modal-header">
        <div class="modal-title">确认删除</div>
        <button class="modal-close" id="closeConfirmModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <p>确定要删除这个联系人吗？删除后将无法恢复。</p>
      </div>
      <div class="modal-footer">
        <button class="modal-btn modal-btn-secondary" id="cancelDelete">取消</button>
        <button class="modal-btn modal-btn-primary" id="confirmDelete">删除</button>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 复制内容到其他样式页面
    const defaultPage = document.getElementById('defaultPage');
    document.getElementById('darkPage').innerHTML = defaultPage.innerHTML;
    document.getElementById('cardPage').innerHTML = defaultPage.innerHTML;
    document.getElementById('minimalPage').innerHTML = defaultPage.innerHTML;
    
    // 获取DOM元素
    const styleOptions = document.querySelectorAll('.style-option');
    const pageContainers = document.querySelectorAll('.page-container');
    const tabs = document.querySelectorAll('.tab');
    const messagesView = document.getElementById('messagesView');
    const contactsView = document.getElementById('contactsView');
    const newChatBtn = document.getElementById('newChatBtn');
    const menuBtn = document.getElementById('menuBtn');
    const newChatModal = document.getElementById('newChatModal');
    const closeNewChatModal = document.getElementById('closeNewChatModal');
    const menuOverlay = document.getElementById('menuOverlay');
    const menuSheet = document.getElementById('menuSheet');
    const cancelMenu = document.getElementById('cancelMenu');
    const contactItems = document.querySelectorAll('.contact-item');
    const contactActionOverlay = document.getElementById('contactActionOverlay');
    const contactActionSheet = document.getElementById('contactActionSheet');
    const cancelContactAction = document.getElementById('cancelContactAction');
    const confirmModal = document.getElementById('confirmModal');
    const closeConfirmModal = document.getElementById('closeConfirmModal');
    const cancelDelete = document.getElementById('cancelDelete');
    const confirmDelete = document.getElementById('confirmDelete');
    const indexLetters = document.querySelectorAll('.index-letter');
    
    // 当前激活的样式索引
    let currentStyleIndex = 0;
    
    // 切换页面样式
    styleOptions.forEach((option, index) => {
      option.addEventListener('click', function() {
        // 更新样式选项的活跃状态
        styleOptions.forEach(opt => opt.classList.remove('active'));
        this.classList.add('active');
        
        // 隐藏当前页面
        pageContainers.forEach(page => page.classList.remove('active'));
        
        // 显示选中的页面
        const styleId = this.getAttribute('data-style') + 'Page';
        document.getElementById(styleId).classList.add('active');
        
        // 更新当前样式索引
        currentStyleIndex = index;
        
        // 更新按钮引用
        updateButtonReferences();
      });
    });
    
    // 更新按钮引用（切换样式后）
    function updateButtonReferences() {
      const activePage = document.querySelector('.page-container.active');
      newChatBtn = activePage.querySelector('#newChatBtn');
      menuBtn = activePage.querySelector('#menuBtn');
      
      // 重新绑定事件
      if (newChatBtn) {
        newChatBtn.addEventListener('click', openNewChatModal);
      }
      
      if (menuBtn) {
        menuBtn.addEventListener('click', openMenuSheet);
      }
      
      // 重新绑定联系人点击事件
      activePage.querySelectorAll('.contact-item').forEach(item => {
        item.addEventListener('click', openContactActionSheet);
      });
      
      // 重新绑定消息点击事件
      activePage.querySelectorAll('.message-item').forEach(item => {
        item.addEventListener('click', function() {
          alert('进入与 ' + this.querySelector('.contact-name').textContent + ' 的聊天界面');
        });
      });
    }
    
    // 切换标签页
    tabs.forEach(tab => {
      tab.addEventListener('click', function() {
        const activePage = document.querySelector('.page-container.active');
        const view = this.getAttribute('data-view');
        
        // 更新标签活跃状态
        activePage.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的视图
        if (view === 'messages') {
          activePage.querySelector('#messagesView').style.display = 'block';
          activePage.querySelector('#contactsView').style.display = 'none';
        } else {
          activePage.querySelector('#messagesView').style.display = 'none';
          activePage.querySelector('#contactsView').style.display = 'block';
        }
      });
    });
    
    // 打开新建聊天弹窗
    function openNewChatModal() {
      newChatModal.classList.add('active');
    }
    
    // 关闭新建聊天弹窗
    closeNewChatModal.addEventListener('click', function() {
      newChatModal.classList.remove('active');
    });
    
    // 打开菜单操作弹窗
    function openMenuSheet() {
      menuOverlay.classList.add('active');
      menuSheet.classList.add('active');
    }
    
    // 关闭菜单操作弹窗
    function closeMenuSheet() {
      menuOverlay.classList.remove('active');
      menuSheet.classList.remove('active');
    }
    
    cancelMenu.addEventListener('click', closeMenuSheet);
    menuOverlay.addEventListener('click', closeMenuSheet);
    
    // 打开联系人操作弹窗
    function openContactActionSheet() {
      contactActionOverlay.classList.add('active');
      contactActionSheet.classList.add('active');
    }
    
    // 关闭联系人操作弹窗
    function closeContactActionSheet() {
      contactActionOverlay.classList.remove('active');
      contactActionSheet.classList.remove('active');
    }
    
    cancelContactAction.addEventListener('click', closeContactActionSheet);
    contactActionOverlay.addEventListener('click', closeContactActionSheet);
    
    // 打开确认弹窗
    contactActionSheet.querySelector('.destructive').addEventListener('click', function() {
      closeContactActionSheet();
      setTimeout(() => {
        confirmModal.classList.add('active');
      }, 300);
    });
    
    // 关闭确认弹窗
    function closeConfirmModalFunc() {
      confirmModal.classList.remove('active');
    }
    
    closeConfirmModal.addEventListener('click', closeConfirmModalFunc);
    cancelDelete.addEventListener('click', closeConfirmModalFunc);
    
    // 确认删除
    confirmDelete.addEventListener('click', function() {
      closeConfirmModalFunc();
      alert('联系人已删除');
    });
    
    // 侧边索引点击事件
    indexLetters.forEach(letter => {
      letter.addEventListener('click', function() {
        indexLetters.forEach(l => l.classList.remove('active'));
        this.classList.add('active');
        
        const section = document.querySelector(`.contact-section:contains('${this.textContent}')`);
        if (section) {
          section.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
        
        // 移除活跃状态（延迟）
        setTimeout(() => {
          this.classList.remove('active');
        }, 1000);
      });
    });
    
    // 添加contains选择器支持
    if (!String.prototype.contains) {
      String.prototype.contains = function() {
        return String.prototype.indexOf.apply(this, arguments) !== -1;
      };
    }
    
    // 初始化事件绑定
    newChatBtn.addEventListener('click', openNewChatModal);
    menuBtn.addEventListener('click', openMenuSheet);
    
    // 消息项点击事件
    document.querySelectorAll('.message-item').forEach(item => {
      item.addEventListener('click', function() {
        alert('进入与 ' + this.querySelector('.contact-name').textContent + ' 的聊天界面');
      });
    });
    
    // 联系人项点击事件
    document.querySelectorAll('.contact-item').forEach(item => {
      // 排除特殊项
      if (!item.querySelector('.fa-user-plus') && !item.querySelector('.fa-users')) {
        item.addEventListener('click', openContactActionSheet);
      } else if (item.querySelector('.fa-user-plus')) {
        item.addEventListener('click', function() {
          alert('查看新的好友请求');
        });
      } else if (item.querySelector('.fa-users')) {
        item.addEventListener('click', function() {
          alert('查看群聊列表');
        });
      }
    });
  </script>
</body>
</html>